<template>
    <div class="password-strength">
      <div 
        class="strength-bar" 
        :class="strengthClass"
      />
      <span class="strength-text" >{{ strengthText }}</span>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  
  const props = defineProps({
    password: {
      type: String,
      default: ''
    }
  })
  
  const strengthLevel = computed(() => {
    if (!props.password) return -1
    let strength = 0
    if (/[A-Z]/.test(props.password)) strength += 1
    if (/[a-z]/.test(props.password)) strength += 1
    if (/\d/.test(props.password)) strength += 1
    if (/[^A-Za-z0-9]/.test(props.password)) strength += 1
    if (props.password.length >= 12) strength += 1
    return Math.min(4, strength)
  })
  
  const strengthClass = computed(() => `level-${strengthLevel.value}`)
  
  const strengthText = computed(() => {
    const texts = ['极弱', '弱', '中', '强', '极强']
    return texts[strengthLevel.value]
  })
  </script>
  
  <style lang="less" scoped>
  .password-strength {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 12px;
  
    .strength-bar {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      background: #ebeef5;
      position: relative;
  
      &::after {
        content: '';
        position: absolute;
        left: 0;
        height: 100%;
        border-radius: 3px;
        transition: all 0.3s;
      }
  
      &.level-0::after { width: 20%; background: #ff4d4f; }
      &.level-1::after { width: 40%; background: #ff7d45; }
      &.level-2::after { width: 60%; background: #ffc53d; }
      &.level-3::after { width: 80%; background: #73d13d; }
      &.level-4::after { width: 100%; background: #389e0d; }
    }
  
    .strength-text {
      font-size: 12px;
      color: #606266;
      width: 40px;
    }
  }
  </style>